<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>博客查询</title>
    <link rel="stylesheet" href="plugins/element-ui/index.css"/>
    <link rel="stylesheet" href="styles/icon/iconfont.css"/>
</head>
<body>
<div id="app">
    <template>
        <el-table
                :data="tableData"
                border
                style="width: 100%">
            <el-table-column
                    prop="blogId"
                    label="ID"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="categoryName"
                    label="分类名称"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="title"
                    label="标题">
            </el-table-column>
            <el-table-column
                    prop="author"
                    label=作者>
            </el-table-column>
            <el-table-column
                    prop="created"
                    label="创建时间">
            </el-table-column>
        </el-table>

    </template>
    <template>
        <el-select v-model="selectCategoryId" placeholder="请选择分类名">
            <el-option
                    v-for="item in categories"
                    :key="item.categoryId"
                    :label="item.categoryName"
                    :value="item.categoryId">
            </el-option>
        </el-select>
        <el-button @click="find">查询</el-button>
    </template>

</div>
</body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="plugins/axios/axios.min.js"></script>
<script src="js/request.js"></script>
<script src="api/blog.js"></script>
<script>
    new Vue({
        el:'#app',
        data(){
            return{
                tableData:[],
                categories:[],
                selectCategoryId:''
            }
        },
        mounted(){
            this.findAll();
            this.findCategories();
        },
        methods:{
            findAll(){
                getAllBlogsApi().then(res=>{
                    //console.log(res)
                    if(res.data.flag){
                        this.tableData = res.data.data;
                    }
                })
            },
            findCategories(){
                getCategories().then(res=>{
                    if(res.data.flag){
                        this.categories = res.data.data;
                    }
                })
            },
            find(){
                getAllBlogsByCategoryIdApi(this.selectCategoryId).then(res=>{
                    if(res.data.flag){
                        this.tableData = res.data.data;
                    }
                })
            }
        }
    })
</script>
</html>